---
import { CollectionEntry, getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
import NavInternal from "../sections/NavInternal.astro";
import Footer from "../sections/Footer.astro";
import Install from "../components/Install.astro";
import HooksList from "../components/search/HooksList";

export async function getStaticPaths() {
  const hooks = await getCollection("hooks");

  return hooks.map((hook) => {
    return {
      params: {
        hook: hook.slug,
      },
      props: {
        hook,
      },
    };
  });
}

interface Props {
  hook: CollectionEntry<"hooks">;
}

const { hook } = Astro.props;
const { Content } = await hook.render();
const { name, tagline, experimental } = hook.data;
const ogImage = new URL(`/meta/${name.toLowerCase()}.png`, Astro.url);
const installSnippet = experimental
  ? `npm i @uidotdev/usehooks@experimental react@experimental react-dom@experimental`
  : `npm i @uidotdev/usehooks`;

const hooks = await getCollection("hooks").then((hooks) => {
  return hooks.filter((h) => {
    return h.slug !== hook.slug;
  });
});
---

<Layout
  title={`${name} React Hook – useHooks`}
  description={tagline}
  ogImage={ogImage}
>
  <NavInternal />
  <main>
    <section>
      <a href="/" class="logo-useHooks logo image">
        <img
          src="/img/logo-useHooks.svg"
          width="546"
          height="80"
          alt="useHooks"
          class="logo-useHooks"
        />
      </a>
      <header>
        <h1 class="title">{name}</h1>
        <p class="tagline">{tagline}</p>
      </header>
      <div>
        <h2>Install:</h2>
        {
          experimental && (
            <p class="experimental">
              Note: This hook depends on React’s experimental useEffectEvent.
            </p>
          )
        }
        <Install text={installSnippet} />
      </div>
      <Content />
    </section>
    <div class="mt-12">
      <h2>More Hooks:</h2>
      <HooksList client:load hooks={hooks} />
    </div>
  </main>
  <Footer />

  <style>
    body {
      min-height: 100lvh;
      display: flex;
      flex-direction: column;
    }

    main {
      width: 100%;
      max-width: 980px;
      margin: 4rem auto;
    }

    section {
      padding: clamp(0.5rem, 4vw, 3rem);
      padding-top: 0;
      display: flex;
      flex-direction: column;
      gap: clamp(1.2rem, 6vw, 3rem);
      background-color: var(--charcoal);
      border-radius: 0.8rem;
    }

    header {
      display: grid;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem 1rem;
    }

    .tagline {
      max-width: 42ch;
    }

    .logo-useHooks {
      width: 180px;
      height: auto;
      transform: translateY(-30%);
    }

    .title {
      color: var(--blue);
      text-transform: none;
      font-family: var(--font-outfit);
      font-size: clamp(1.6rem, 5vw, 2.6rem);
      font-weight: 600;
    }

    .install,
    .install code {
      background-color: var(--coal);
    }

    .install .copy-btn:hover,
    .install .copy-btn:focus-visible {
      background-color: var(--charcoal);
    }

    main :global(h2) {
      font-size: clamp(1rem, 2.2vw, 1.2rem);
      margin-bottom: 1rem;
    }

    main :global(code) {
      background-color: var(--coal);
    }

    .experimental {
      font-size: 1.1rem;
      font-style: italic;
      margin-bottom: 1rem;
    }

    @media screen and (max-width: 500px) {
      .experimental ~ .install {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    :global(.reference) {
      font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    }

    :global(.reference > * + *) {
      margin-top: 1.5rem;
    }

    :global(.reference h3) {
      font-size: clamp(0.9rem, 2vw, 1.1rem);
    }

    :global(.reference .table-container) {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 0.07rem solid rgba(249, 244, 218, 0.1);
    }

    :global(.reference table) {
      border-radius: 0.9rem;
      font-size: clamp(1rem, 2.1vw, 1.2rem);
    }

    :global(.reference h3:not(:first-child)) {
      margin-top: 2rem;
    }

    :global(.reference thead) {
      /* border-bottom: 0.07rem solid rgba(249, 244, 218, 0.1); */
      background-color: rgba(249, 244, 218, 0.1);
      font-size: var(--font-sm);
      text-align: left;
    }

    :global(.reference tr:not(:last-of-type)) {
      border-bottom: 0.07rem solid rgba(249, 244, 218, 0.1);
    }

    :global(.reference td),
    :global(.reference th) {
      padding: 0.5rem 1.2rem 0.5rem 0.75rem;
    }

    :global(.reference td:not(:last-of-type)),
    :global(.reference th:not(:last-of-type)) {
      min-width: 10ch;
    }

    :global(.reference td:last-of-type),
    :global(.reference th:last-of-type) {
      width: 100%;
      min-width: 300px;
    }

    :global(.sp-preview-container),
    :global(.sp-preview-container iframe) {
      background: var(--coal) !important;
    }

    :global(pre) {
      overflow: auto;
      width: 100%;
      background-color: transparent !important;
      padding: 2rem;
      border-radius: 0.5rem;
    }

    :global(pre code) {
      font-size: 1rem;
      display: block;
      font-family: "Fira Code", monospace;
    }
  </style>
</Layout>
